<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    :before-close="closeDialog"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="80px"
      v-loading="loading"
    >
      <el-form-item label="选择患者" prop="patientInfo" v-if="!dataForm.id">
        <el-cascader
          style="width: 230px"
          :props="defaultProps"
          @change="handleSubChange"
          :options="deptOptions"
        ></el-cascader>
        <el-select v-model="dataForm.patientId" placeholder="请选择">
          <el-option
            style="width: 230px"
            v-for="item in patientOptions"
            :key="item.id"
            :label="'[姓名] ' + item.name + '  [电话] ' + item.phone"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-else label="患者信息">
        <el-descriptions border :column="2">
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              患者姓名
            </template>
            {{ patientInfo.name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              患者病情
            </template>
            {{ patientInfo.subTitle }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              患者电话
            </template>
            {{ patientInfo.phone }}
          </el-descriptions-item>
        </el-descriptions>
      </el-form-item>
      <el-form-item label="随访标题" prop="visitTitle">
        <el-input
          v-model="dataForm.visitTitle"
          :maxlength="18"
          show-word-limit
          clearable
          placeholder="随访标题"
        ></el-input>
      </el-form-item>
      <el-form-item label="随访阶段" prop="visitStep" v-if="!dataForm.id">
        <el-row>
          <el-col :span="19">
            <el-input
              :maxlength="18"
              show-word-limit
              clearable
              v-model="inputValue"
              placeholder="请输入随访阶段"
            ></el-input>
          </el-col>
          <el-col :span="4">
            <el-button style="margin-left: 36px;" type="primary" @click="addStep">添加步骤</el-button>
          </el-col>
        </el-row>
        <el-tag
          style="margin-left: 5px;"
          :key="index"
          v-for="(tag, index) in contentTags"
          closable
          :disable-transitions="false"
          @close="handleClose(tag)"
        >{{index+1 + '阶段：' + tag}}</el-tag>
      </el-form-item>
      <el-form-item label="随访轮次" prop="visitCount">
        <template>
          <el-input-number v-model="dataForm.visitCount" label="随访轮次" :min="1" :max="10"></el-input-number>
        </template>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取消</el-button>
      <el-button
        :loading="buttonLoading"
        type="primary"
        @click="dataFormSubmit()"
      >{{this.dataForm.id ? '修改' : '添加'}}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { subTree } from "@/api/gonitis/illSub";
import { listBySubId } from "@/api/gonitis/patient";
import { queryVisit, saveVisit, updateVisit } from "@/api/gonitis/visit";
export default {
  name: "EditVisit",
  data() {
    return {
      visible: false,
      loading: false,
      buttonLoading: false,
      // 病情多选框映射
      defaultProps: {
        children: "children",
        label: "label",
        value: "id"
      },
      patientInfo: {},
      contentTags: [],
      inputValue: "",
      // 部门下拉树对象
      deptOptions: [],
      patientOptions: [],
      dataForm: {
        id: 0,
        visitStep: "",
        subId: null,
        patientId: null,
        visitCount: "",
        visitStatus: "",
        visitTitle: ""
      },
      dataRule: {
        patientInfo: [
          {
            validator: (rule, value, callback) => {
              if (!this.dataForm.patientId || !this.dataForm.subId) {
                callback(new Error("必须选择患者"));
              } else {
                callback();
              }
            },
            required: true,
            trigger: "blur"
          }
        ],
        visitCount: [
          { required: true, message: "随访轮次不能为空", trigger: "blur" }
        ],
        visitStep: [
          {
            validator: (rule, value, callback) => {
              if (!this.dataForm.visitStep) {
                callback(new Error("最少要有一个随访阶段"));
              } else {
                callback();
              }
            },
            required: true,
            trigger: ["blur", "change"]
          }
        ],
        visitStatus: [
          { required: true, message: "随访状态不能为空", trigger: "blur" }
        ],
        replyTime: [
          { required: true, message: "回复时间不能为空", trigger: "blur" }
        ],
        visitTitle: [
          { required: true, message: "随访标题不能为空", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    /** 关闭某个teghandleClose(tag) */
    handleClose(tag) {
      const indexToRemove = this.contentTags.indexOf(tag);
      // 如果存在就删除
      if (indexToRemove !== -1) {
        this.contentTags.splice(indexToRemove, 1);
        if (!this.contentTags || this.contentTags.length <= 0) {
          this.dataForm.visitStep = null;
        } else {
          this.dataForm.visitStep = this.contentTags[0];
          for (let i = 1; i < this.contentTags.length; i++) {
            this.dataForm.visitStep += "," + this.contentTags[i];
          }
        }
      }
    },
    /** 添加随访步骤 */
    addStep() {
      if (!this.inputValue) {
        return;
      }
      this.contentTags.push(this.inputValue);
      this.inputValue = "";
      this.dataForm.visitStep = this.contentTags[0];
      for (let i = 1; i < this.contentTags.length; i++) {
        this.dataForm.visitStep += "," + this.contentTags[i];
      }
    },
    /** 关闭掉对话框 */
    closeDialog() {
      this.$emit("getDataList");
      this.$parent.editVisible = false;
      this.visible = false;
    },
    /** 获取表单对象数据 */
    getDataForm() {
      const visitId = this.dataForm.id;
      this.loading = true;
      queryVisit(visitId).then(response => {
        this.dataForm.visitTitle = response.data.visitTitle;
        this.dataForm.visitCount = response.data.visitCount;
        this.patientInfo = response.data.params.patientInfo;
        this.loading = false;
      });
    },
    /** 初始化 */
    init(id) {
      this.visible = true;
      if (id !== 0) {
        this.dataForm.id = id;
        this.getDataForm();
      } else {
        // 添加
        this.dataForm.id = undefined;
        this.getDeptTree();
      }
    },
    /** 病情分类选择框改变 */
    handleSubChange(value) {
      this.dataForm.subId = value[value.length - 1];
      // 发送请求查询对应病情的病人
      listBySubId(this.dataForm.subId).then(response => {
        this.patientOptions = response.data;
      });
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      subTree().then(response => {
        this.deptOptions = response.data;
      });
    },
    /** 表单提交 */
    dataFormSubmit() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          if (this.dataForm.id) {
            // 执行更新
            this.buttonLoading = true;
            updateVisit(this.dataForm)
              .then(response => {
                this.$modal.msgSuccess("修改成功");
                this.closeDialog();
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          } else {
            // 执行添加
            this.buttonLoading = true;
            saveVisit(this.dataForm)
              .then(response => {
                this.$modal.msgSuccess("添加成功");
                this.closeDialog();
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          }
        }
      });
    }
  }
};
</script>
